import React from 'react'
import '../../assets/css/home/classify.less'
import SearchComponent from './Search'
import {Modal} from 'antd-mobile'
import 'antd-mobile/lib/modal/style/index.css'
export default class ClassifyComponent extends React.Component {
    constructor() {
        super()
        this.state = {
            goods: [],
            nav: [],
            activeId: '492',
            hasGood: true,
            findState: true,
            find: [],
            hotFind: [],
            inputVal: '',
            searchData: [],
            search:false
        }
    }

    componentWillMount() {
        if (this.props.history.location.query === undefined) {
        } else {
            this.setState({
                activeId: this.props.history.location.query.id
            })
        }
        if (localStorage['find']) {
            this.setState({
                find: JSON.parse(localStorage['find'])
            })
        }
        console.log(this.state.find);
    }

    componentDidMount() {
        this.getData()
        this.getGoods(this.state.activeId)
        this.getFind()
    }

    //获取左边nav数据
    getData() {
        fetch(
            'http://vueshop.glbuys.com/api/home/category/menu?token=1ec949a15fb709370f'
        )
            .then((res) => {
                return res.json()
            })
            .then((res) => {
                if (res.code === 200) {
                    this.setState({nav: res.data}, () => {
                        console.log(this.state.nav)
                    })
                }
            })
    }

    //商品数据
    getGoods(cid) {
        fetch(
            'http://vueshop.glbuys.com/api/home/category/show?cid=' + cid + '&token=1ec949a15fb709370f'
        )
            .then((res) => {
                return res.json()
            })
            .then((res) => {
                if (res.code === 200) {

                    this.setState({
                        goods: res.data,
                        hasGood: true
                    }, () => {
                        console.log(this.state.goods)
                    })
                } else {
                    this.setState({
                        hasGood: false
                    })
                }
            })
    }

    //导航切换
    changeGoods(item) {
        if (item.cid === this.state.activeId) {
            return
        }
        this.getGoods(item.cid)
        this.setState({
            activeId: item.cid
        })
        // console.log(item.cid);
    }

    goBack() {
        this.props.history.goBack()
    }

    //热门搜索数据
    getFind() {
        fetch(
            'http:////vueshop.glbuys.com/api/home/public/hotwords?token=1ec949a15fb709370f'
        )
            .then((res) => {
                return res.json()
            })
            .then((res) => {
                if (res.code === 200) {
                    console.log(res);
                    this.setState({
                        hotFind: res.data
                    })
                }
            })
    }

    //热门搜索点击事件
    hotSearch(val) {
        if (val === this.state.inputVal || val === '') {
            return
        }
        this.setState({
            inputVal: val
        },()=>{
            this.search()
        })
    }

    //点击搜索
    search() {
        if (this.state.inputVal === '') {
            return
        }
        this.getSearchData()
        this.setState({
            search:true
        })
        console.log('1');
        if(this.state.find){
            for (var i = 0; i < this.state.find.length; i++) {
                if (this.state.inputVal === this.state.find[i]) {
                    return
                }
            }
        }
        this.state.find.unshift(this.state.inputVal)
        if(this.state.find.length>12){
            this.state.find.splice(12,1)
        }
        this.setState({
            find: this.state.find,
        }, () => {
            localStorage.setItem('find', JSON.stringify(this.state.find));
            // localStorage['find'] = this.state.find
            console.log(this.state.find);
            console.log(JSON.parse(localStorage['find']));
        })
    }
    //搜索结果
    getSearchData() {
        fetch(
            'http://vueshop.glbuys.com/api/home/goods/search?kwords=' + this.state.inputVal + '&param=&page=1&price1=&price2=&otype=all&cid=&token=1ec949a15fb709370f'
        )
            .then((res) => {
                return res.json()
            })
            .then((res) => {
                if (res.code === 200) {
                    console.log(res);
                    this.setState({
                        searchData: res.data
                    })
                }
            })
    }
    //清空历史搜索
    del(){
        Modal.alert('提示', '您确定要删除吗？', [
            {
                text: '取消',
                onPress: () =>{}
            },
            { text: '确定', onPress:() =>{
                    console.log('ok');
                    localStorage.removeItem('find')
                    this.setState({
                        find:[]
                    })
                } },
        ])

    }

    setPath(path,index){
        this.props.history.push({
            pathname:path,
            query:{
                id:index
            }
        })
    }
    render() {

        return (
            <div id='classify'>
                <div className='header'>
                    {this.state.findState ?
                        <div onClick={this.goBack.bind(this)}>
                            <img src="/images/user/my/返回.png" alt=""/>
                        </div> :
                        <div className='close' onClick={() => {
                            this.setState({
                                findState: true,
                                inputVal: '',
                                search:false
                            })
                        }
                        }>
                            <img src="/images/common/search_x.png" alt=""/>
                        </div>
                    }
                    <div>
                        <input onFocus={() => {
                            this.setState({
                                findState: false,
                                search:false
                            })
                        }} type="text" placeholder='请输入宝贝名称' onChange={(e) => {
                            this.setState({
                                inputVal: e.target.value
                            })
                        }} value={this.state.inputVal}/>
                        {this.state.findState ?
                            '' : <div onClick={this.search.bind(this)}>
                                <img src="/images/common/search_icon.png" alt=""/>
                            </div>
                        }

                    </div>
                    <div className='header-saixuan' style={this.state.search?{}:{display:'none'}}>筛选</div>
                </div>
                <div className='header-div'></div>
                <div style={this.state.search?{display:'none'}:{}}>
                    {this.state.findState ?
                        <div>
                            <div className='left-nav'>
                                {this.state.nav.map((item, index) => {
                                    return (
                                        <div key={index} className={item.cid === this.state.activeId ? 'active' : ''}
                                             onClick={this.changeGoods.bind(this, item)}>
                                            <div>{item.title}</div>
                                        </div>
                                    )
                                })}
                            </div>
                            {!this.state.hasGood ?
                                <div className='message'>没有相关商品！</div>
                                :
                                <div className='goods'>
                                    {this.state.goods.map((item, index) => {
                                        return (
                                            <div key={index}>
                                                <div className='goods-title'>{item.title}</div>
                                                {item.goods === null ?
                                                    '' : <div className='item-goods'>
                                                        {item.goods.map((item2, index2) => {
                                                            return (
                                                                <div
                                                                    onClick={this.setPath.bind(this,'/detail',item2.gid)}
                                                                    key={index2} className='item-good'>
                                                                    <div className='item-img'>
                                                                        <img src={item2.image} alt=""/>
                                                                    </div>
                                                                    <div className='item-title'><p>{item2.title}</p></div>
                                                                </div>
                                                            )
                                                        })}

                                                    </div>
                                                }

                                            </div>
                                        )
                                    })}
                                </div>
                            }</div>
                        :
                        <div className='find'>
                            {localStorage['find']!==undefined?
                                <div className='rece-find'>
                                    <div>
                                        <div>最近搜索</div>
                                        <div
                                        >
                                            <img    onClick={this.del.bind(this)} src="/images/common/bin.png" alt=""/>
                                        </div>
                                    </div>

                                    <div className='hot-txt'>
                                        {this.state.find.map((item, index) => {
                                            return (
                                                <div key={index} onClick={this.hotSearch.bind(this, item)}>
                                                    {item}
                                                </div>
                                            )
                                        })}
                                    </div>
                                </div>
                                : ''
                            }
                            <div className='hot-find'>
                                <div>热门搜索</div>
                                <div className='hot-txt'>
                                    {this.state.hotFind.map((item, index) => {
                                        return (
                                            <div key={index} onClick={this.hotSearch.bind(this, item.title)}>
                                                {item.title}
                                            </div>
                                        )
                                    })}
                                </div>
                            </div>

                        </div>
                    }
                </div>
                <div style={!this.state.search?{display:'none'}:{}}>
                    <SearchComponent inputVal={this.state.inputVal} searchData={this.state.searchData} />
                </div>




            </div>
        )
    }
}